<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm :fieldList="fieldList" :options="formOption" :formData="form">
          <template #ShopCascade>
            <SelectsShopCascade :defaultPlatform="2" multiple v-model:platform="form.platform_id" v-model:site="form.site_id" v-model:shop="form.shop_id" />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <el-button @click="returnPage">返回【订单利润报表】</el-button>
        <div class="ml-auto">
          <el-button type="primary" @click="returnPage">导入</el-button>
        </div>
      </template>
    </VTable>

    <Details1 ref="DetailsRef" />

    <!-- 弹窗 表单编辑 -->
    <ConfirmInput v-model="batchVisible" v-bind="currentConfirm" @submit="handleConfirmSubmit" @close="handleConfirmClose" />

    <Log dialog v-model="logVisible" :autoLoad="false" tag="expense_customize_import" :business_id="logId" />
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import Log from "@/components/Log/index.vue"
import XForm from "@/components/XForm/index.vue"

import Details1 from "./details"
const DetailsRef = ref()

import { groupArchive, groupArchiveMigrate } from "../api/index.js"
import action from "@/utils/action.js"
import { reportAuthList } from "@/Auth/report.js"
import { ref, toRefs, reactive, onMounted } from "vue"
import SelectsShopCascade from "@/components/Selects/SelectsShopCascade/index.vue"
// 弹窗 表单编辑
import ConfirmInput from "@/components/ConfirmInput/index.vue"
const batchVisible = ref(false)
const currentConfirm = ref({})
const batchOConfig = {
  shop: {
    formOptions: {},
    title: "关联店铺",
    form: {},
    fieldOptions: [{ label: "店铺", field: "shop_id", originField: "shopList", type: "select", options: { placeholder: "店铺" }, style: { width: "100%" } }],
  },
}
const openConfirmInput = (type, params = {}) => {
  let confirm = {}
  switch (type) {
    case "shop": // 关联店铺
      confirm = batchOConfig.shop
      confirm.form = { id: params.id }
      confirm.originOption = originOption.value
      break
  }
  confirm.type = type
  currentConfirm.value = confirm
  batchVisible.value = true
}

const handleConfirmSubmit = (param) => {
  try {
    let params = {}
    let requests = null
    let message = ""
    switch (currentConfirm.value.type) {
      case "shop": // 关联店铺
        requests = groupArchiveMigrate
        params = { ...param }
        break
    }
    requests(params).then((res) => {
      ElMessage.success(message || res.message)
      tableRef?.value.query()
      handleConfirmClose()
    })
  } catch (error) {}
}
const handleConfirmClose = () => {
  batchVisible.value = false
  nextTick(() => {
    currentConfirm.value = {}
  })
}

const tableRef = ref()

const rows = ref([])
const originOption = ref({})
onMounted(async () => {
  getOption()
})
import { getShopOptions } from "@/api/public"

const getOption = async () => {
  const res = await getShopOptions({ site_ids: [], platform_ids: [2] })
  originOption.value.shopList = res.data.map((v) => ({ label: v.shop_name, value: v.shop_id }))
}

const formOption = {}
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  { slot: "ShopCascade" },
  {
    field: "timeRange",
    type: "dateTimeRangeNorm",
    select: [
      { label: "结算开始时间", value: "financial_start" },
      { label: "结算结束时间", value: "financial_end" },
      { label: "转账时间", value: "transfer_time" },
    ],
    selectStyle: { width: "130px" },
    style: { width: "368px" },
  },

  { field: "financial_status", origin: "financial_status", type: "select", options: { placeholder: "结算状态" }, ...publicStyle },
  { field: "transfer_status", origin: "amazon_group_transfer_status", type: "select", options: { placeholder: "转账状态" }, ...publicStyle },
  { field: "associate_status", origin: "associate_status", type: "select", options: { placeholder: "关联状态" }, ...publicStyle },
])

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      platform_id: [2],
      timeRange: { type: "financial_start", value: "" },
    },
  },
  showOverflow: true,
  columns: [
    { width: 50, type: "checkbox" },
    { width: 100, title: "ID", field: "id" },

    {
      title: "店铺",
      width: 160,
      slots: {
        default: ({ row }) => (
          <div>
            {row.shop ? (
              <div>{row.shop}</div>
            ) : (
              <el-button link type="primary" onClick={() => openConfirmInput("shop", row)}>
                未关联店铺
              </el-button>
            )}
          </div>
        ),
      },
    },
    { title: "站点", field: "site", width: 100 },
    { title: "报告类型", field: "report_type", width: 100 },
    { title: "结算开始时间", field: "financial_start", width: 180 },
    { title: "结算结束时间", field: "financial_end", width: 180 },
    { title: "转账状态", field: "transfer_status_desc", width: 100 },
    { title: "结算状态", field: "financial_status_desc", width: 100 },
    { title: "关联状态", field: "associate_status_desc", width: 100 },
    { title: "追踪号", field: "trace_id", width: 170 },
    { title: "银行卡尾号", field: "bank_card_last_number", width: 100 },
    { title: "应收币种", field: "receivable_currency", width: 100 },
    { title: "应收金额", field: "receivable_amount", width: 100 },
    { title: "转账币种", field: "transfer_currency", width: 100 },
    { title: "转账金额", field: "transfer_amount", width: 100 },
    { title: "期初金额", field: "begin_balance", width: 100 },
    {
      title: "操作",
      width: 220,
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return [
            <div class="flex flex-wrap">
              <el-button link type="primary" onClick={() => ruleEdit(row)}>
                账单明细
              </el-button>
              {!row.shop ? (
                <el-button link type="primary" onClick={() => openConfirmInput("shop", row)}>
                  关联店铺
                </el-button>
              ) : (
                ""
              )}
              <el-button link type="primary" onClick={() => handleLog(row)}>
                日志
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],

  proxyConfig: {
    ajax: {
      query: ({ page, form }) => groupArchive({ ...form, ...page, is_new: 1 }),
    },
  },
})
const ruleEdit = (row, type) => {
  // customFeeOpen(row, type)
  console.log(DetailsRef.value)

  DetailsRef.value.open(row)
}
//获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  return getCheckboxRecords
}

// 日志
const logVisible = ref(false)
const logId = ref("")
const handleLog = (item) => {
  logId.value = item.id
  logVisible.value = true
}
const returnPage = () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      type: "closeActiveTab",
    },
  })
}

defineExpose({})
</script>

<style lang="scss" scoped></style>
